<template>
	<view class="qh-center-popup flex-cn-cn" v-show="showModal">
		<view class="qh-center-popup-modal" :class="{'is-show': showInner, 'is-transition': transition}"></view>
		<view class="qh-center-popup__content-box" :class="{'is-transition': transition, 'is-scale': scale && !showInner, 'is-show': showInner}"
			:style="contentBoxStyle">
			<view class="qh-center-popup__content-top flex-cn-cn" :class="{'show-title': showTitle, 'title-line border-bottom': showTitle && titleLine}"
				v-if="showClose || showTitle">
				<view class="qh-center-popup__content-top-title font500" v-if="showTitle">
					<slot name="title" v-if="$slots['title']"></slot>
					<text v-else>{{title}}</text>
				</view>
				<text class="qh-rt-single qh-rt-a-ziyuan1 qh-center-popup__top-close" v-if="showClose" @click.stop="close"></text>
			</view>
			<view class="qh-center-popup__content" :style="contentStyles">
				<slot></slot>
			</view>
			<view class="qh-center-popup__button-box flex-cn border-top" v-if="showCancel || showConfirm">
				<view class="qh-center-popup__button-item border-right cancel flex-cn-cn" v-if="showCancel" @click.stop="close">{{cancelText}}</view>
				<view class="qh-center-popup__button-item confirm flex-cn-cn" v-if="showConfirm" @click.stop="confirm">{{confirmText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "qh-center-popup",
		props: {
			value: Boolean,
			title: {
				type: String,
				default: ''
			},
			width: {
				type: [String, Number],
				default: ''
			},
			showTitle: {
				type: Boolean,
				default: true,
			}, //是否显示标题
			titleLine: {
				type: Boolean,
				default: false,
			}, //是否显示标题下的横线
			showClose: {
				type: false,
				default: false,
			}, //是否显示右上角关闭按钮
			showCancel: {
				type: Boolean,
				default: true,
			}, //是否显示底部按钮取消按钮
			showConfirm: {
				type: Boolean,
				default: true,
			}, //是否显示底部按钮确认按钮
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			confirmClose: {
				type: Boolean,
				default: true,
			}, //确定时是否自动关闭弹窗
			scale: {
				type: Boolean,
				default: true,
			}, //是否需要大小变化效果
			transition: {
				type: Boolean,
				default: true,
			}, //是否需要过渡效果
			contentStyle: {
				type: [String, Object],
				default () {
					return {}
				}
			},
		},
		emit: ['update:value', 'input', 'cancel', 'confirm'],
		data() {
			return {
				showModal: false,
				showInner: false,
			};
		},
		computed: {
			contentBoxStyle() {
				return this.width ? ('width:' + this.$getUnitSize(this.width)) : '';
			},
			contentStyles() {
				return this.$joinStyle(this.contentStyle);
			},
		},
		methods: {
			show() {
				this.showModal = true;
				setTimeout(() => {
					this.showInner = true;
				}, 100)
			},
			hide() {
				this.showInner = false;
				setTimeout(() => {
					this.showModal = false;
				}, 100)
			},
			updateData() {
				this.$emit('update:value', false);
				this.$emit('input', false);
			},
			close() {
				this.updateData();
				this.$emit('cancel', false);
			},
			confirm() {
				this.$emit('confirm');
				if (this.confirmClose) {
					this.updateData();
				}
			},
		},
		created() {
			if (this.value) {
				this.show();
			}
		},
		watch: {
			value(n, o) {
				if (n) {
					this.show();
				} else {
					this.hide();
				}
			},
		},
	}
</script>

<style lang="scss">
	.qh-center-popup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1999;

		.qh-center-popup-modal {
			width: 100%;
			height: 100%;
			background-color: transparent;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;

			&.is-transition {
				transition: all 0.3s ease;
			}

			&.is-show {
				z-index: 1;
				background-color: rgba(51, 51, 51, 0.6);
			}
		}

		.qh-center-popup__content-box {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			width: calc(100vw - 140rpx);
			position: relative;
			z-index: -1;
			opacity: 0;

			&.is-transition {
				transition: all 0.3s ease;
			}

			&:not(.is-scale) {
				transform: scale(1);
			}

			&.is-scale {
				transform: scale(0.8);
			}

			&.is-show {
				z-index: 1;
				opacity: 1;
				transform: scale(1);
			}

			.qh-center-popup__content-top {
				height: 70rpx;
				position: relative;

				&.show-title {
					padding-top: 44rpx;
					height: 112rpx;
					box-sizing: border-box;
				}

				&.title-line {
					padding-top: 10rpx;
				}

				.qh-center-popup__content-top-title {
					font-size: 34rpx;
					color: #000000;
					line-height: 62rpx;
				}

				.qh-center-popup__top-close {
					padding: 20rpx;
					font-size: 27rpx;
					color: #929397;
					position: absolute;
					right: 20rpx;
					top: 22rpx;
				}
			}

			.qh-center-popup__content {
				width: 100%;
				padding: 20rpx;
				max-height: 60vh;
				overflow-y: auto;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #1E1E1E;
				line-height: 40rpx;
				position: relative;
			}

			.qh-center-popup__button-box {
				height: 100rpx;
				box-sizing: border-box;

				.qh-center-popup__button-item {
					flex: 1;
					font-size: 32rpx;
					line-height: 40rpx;
					height: 100%;

					&:nth-last-child(1) {
						border-right: none;
					}

					&.cancel {
						color: #1E1E1E;
					}

					&.confirm {
						color: var(--primary-color);
					}
				}
			}
		}
	}
</style>
